<template>
	<view class="page" v-cloak>
		<!-- 自定义头部 -->
		<view class="cu-custom bg-top" :style="[{height: CustomBar+'px',paddingTop: StatusBar+'px'}]">
			<view class="cu-bar fixed bg-top" :style="style">
				<view class="action" @tap="back">
					<text class="cuIcon-back text-white"></text>
				</view>
				<view class="content text-white" :style="[{top:StatusBar + 'px'}]">
					{{i18n['抢购免费拿']}}
				</view>
				<!-- #ifndef MP-WEIXIN -->
				<view class="right padding-right text-white" @click="toggleRuleModal">
					{{i18n['规则']}}
				</view>
				<!-- #endif -->
			</view>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="text-white rules" @click="toggleRuleModal" :style="{top:CustomBar + 5 +'px'}">
			{{i18n['规则']}}
		</view>
		<!-- #endif -->
		<!-- 活动标题 -->
		<view class="bargain-bg">
			<image :src="imgBaseUrl+'/activity/bargain-bg.png'" mode="aspectFill"></image>
		</view>
		<!-- 正在砍的商品列表 -->
		<view class=" overHidden bg-theme margin-lr radius-24" v-if="myBargains.length > 0">
			<view class="bg-fdb height-70 line-height-70 text-lg text-center text-white">
				{{i18n['正在进行中']}}
			</view>
			<view class="">
				<block v-for="(item,index) in myBargains" :key="item.bargain_id">
					<view class="padding-tb-sm margin-lr-sm solid-bottom flex" @click="handleLook(item)">
						<view class="fu-block-220 margin-right-sm radius overHidden">
							<fu-image :src="item.thumb" mode="aspectFill"></fu-image>
						</view>
						<view class="flex-sub flex flex-direction justify-between">
							<view class="text-lg">{{i18n['已砍']}}<text
									class="text-theme text-bold">{{item.cut_price}}</text>{{i18n['元']}},{{i18n['仅差']}}<text
									class="text-theme text-bold">{{item.surplus_percentage}}%</text></view>
							<view class="cu-progress round sm">
								<view class="bg-theme" :style="[{ width: (100 - item.surplus_percentage)+'%'}]">
								</view>
							</view>
							<view class="flex align-center">
								<fu-uni-countdown backgroundColor="#94540c" color="#ffffff" :showDay="false"
									:seconds="item.count_down*1000" @timeup="handleOver"></fu-uni-countdown>
								<text class="text-sm margin-left-xs" style="color: #94540c;">{{i18n['后结束']}}</text>
							</view>
							<view>
								<button
									class=" cu-btn block round bg-theme text-white">{{i18n['继续抢购']}}</button>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		<!-- 活动商品列表 -->
		<view
			class="activity-list margin-top-50 margin-lr flex flex-wrap relative radius-16 padding-lr-10 padding-tb-20"
			v-if="lists.length > 0">
			<block v-for="(item,index) in lists" :key="index">
				<view class="list-item w50 height-450 margin-bottom-20" @click="navToDetail(item)">
					<view
						class="item-box margin-lr-xs radius-16 padding-20 flex flex-direction justify-between align-center">
						<view class="fu-block-220 radius overHidden">
							<fu-image :src="item.thumb" mode="aspectFill"></fu-image>
						</view>
						<view class="item-box-title text-df height-42 text-cut overHidden">{{item.name}}</view>
						<view>
							<button class="cu-btn round button-box width-240 text-white">{{i18n['点击免费拿']}}</button>
						</view>
					</view>
				</view>
			</block>
		</view>
		<!-- 空布局 -->
		<view class="empty-box radius-16 margin-top-50 margin-lr">
			<fu-empty-ui v-if="lists.length == 0 && isInit"></fu-empty-ui>
		</view>
		<!-- 加载状态 -->
		<uni-load-more v-if="lists.length > 5"></uni-load-more>
		<!-- 活动规则 -->
		<fu-popup v-model="showRuleModal" mode="center" width="500rpx" height="700rpx" border-radius="16"
			:mask-custom-style="{background: 'rgba(0,0,0,0.65)'}" :mask-close-able="false">
			<view class="rule-box bg-white">
				<view class="text-333 height-100 fu-fs32 line-height-100 text-center text-bold solid-bottom">
					{{i18n['活动规则']}}
				</view>
				<scroll-view class="rule-box-content text-df text-333 padding-20" scroll-y>
					<jyf-parser :html="rules"></jyf-parser>
				</scroll-view>
				<view class=" text-theme height-100 line-height-100 text-center text-lg solid-top" @click="toggleRuleModal">
					{{i18n['关闭']}}
				</view>
			</view>
		</fu-popup>
	</view>
</template>

<script>
	import richText from '@/common/utils/richText.js';
	export default {
		data() {
			return {
				showNavbar: false, // 显示自定义标题颜色 备注: 根据页面滚动高度判断
				showRuleModal: false, // 显示规则弹窗
				status: 'more', // 加载状态
				page: 1, // 页数
				size: 10, // 每页条数
				isInit: false,
				lists: [], // 活动列表
				myBargains: [], // 我的抢购列表
				rules: "",
			}
		},
		computed: {
			style() {
				let StatusBar = this.StatusBar;
				let CustomBar = this.CustomBar;
				let isShow = this.showNavbar;
				if (isShow) {
					return `height:${CustomBar}px;padding-top:${StatusBar}px;background: #ff5834;`;
				} else {
					return `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				}
			}
		},
		onLoad(options) {
			this.loadData();
			this.getBargainRuleData();
		},
		onPageScroll(e) {
			// let scrollTop = e.scrollTop;
			// if (scrollTop >= 10) {
			// 	this.showNavbar = true;
			// } else {
			// 	this.showNavbar = false;
			// }
		},
		onPullDownRefresh() {
			this.page = 1;
			this.status = 'more';
			this.getMyBargain();
		},
		onReachBottom() {

		},
		methods: {
			back() {
				uni.navigateBack();
			},
			// 切换规则弹窗显示与否
			toggleRuleModal() {
				this.showRuleModal = !this.showRuleModal;
			},
			// 获取我的抢购列表
			getMyBargain() {
				this.$api.post(global.apiUrls.postMyBargainList)
					.then(res => {
						if (res.data.code == 1) {
							this.myBargains = res.data.data;
						}
						uni.stopPullDownRefresh();
					})
			},
			// 获取活动商品列表
			loadData() {
				if (this.status != 'more') return;
				this.status = 'loading';
				let data = {
					page: this.page,
					list_rows: this.size,
					type: 5, //1:秒杀活动;2:拼团活动，3：预售 5：抢购
					user_id:global.userInfo &&global.userInfo.id
				};
				this.$api.post(global.apiUrls.postSeckillList, data)
					.then(res => {
						if (res.data.code == 1) {
							res = res.data;
							var totalSize = res.data.total;
							let arr = res.data.data
							var curPageData = arr;
							if (this.page == 1) this.lists = [];
							this.lists = this.lists.concat(curPageData);
							if (this.lists.length < totalSize) {
								this.status = 'more';
								this.page++;
							} else {
								this.status = 'noMore';
							}
						}
						this.isInit = true;
						uni.stopPullDownRefresh();
					}).catch(err => {
						console.log('ERROR', err);
						uni.stopPullDownRefresh();
						this.status = 'more';
					})
			},
			// 去商品详情页
			navToDetail(item) {
				this.$urouter.navigateTo({
					url: '/pages/activity/bargain/bargain-detail/index',
					params: {
						goods_id: item.goods_id,
						sku_id: item.sku_id,
						activity_id: item.activity_id,
					}
				})
			},
			// 查看详情
			handleLook(item) {
				uni.navigateTo({
					url: '/pages/activity/bargain/bargain-log/index?bargain_id=' + item.bargain_id,
				})
			},
			// 倒计时结束
			handleOver() {
				this.$util.debounce(() => {
					this.getMyBargain();
				}, 1000, true);
			},
			// 抢购规则
			getBargainRuleData() {
				this.$api.post(global.apiUrls.postOperationGetColumn, {
					category_id: 11,
				}).then(res => {
					var res = res.data
					if (res.code == 1) {
						this.rules = richText.format(res.data.content);
					} else {
						this.rules = ''
					}
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		background-color: #f55252;
		padding-bottom: 32rpx;
	}

	.page {
		height: 100vh;
		overflow: auto;
		background-color: #f55252;
	}

	.bg-top {
		background: url($IMG_BASE_URL+'/activity/bargain-bg.png');
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.rules {
		position: fixed;
		right: 32rpx;
	}

	.bargain-bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 591rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.bg-fdb {
		background-color: #fdbf0f;
	}

	.activity-list {
		background-color: rgb(245, 82, 82);
		top: 451rpx;
		.item-box {
			height: 100%;
			background: linear-gradient(#FEF9EA, #FCE6BB);
			.button-box {
				background: linear-gradient(#FDEFCF, #FDDE55);
				border: 1px solid rgb(248, 149, 31);
				color: #9B6839;			}

			.item-box-title {
				color: #9B6839;
				max-width: 260rpx;
			}
		}
	}

	// 规则弹窗
	.rule-box {
		width: 100%;
		height: 100%;
		.rule-box-content {
			height: calc(100% - 200rpx);
		}
	}

	// 空布局
	.empty-box {
		background-color: #ffe2bb;
	}

	// 公共样式 end
</style>
